<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>重新布局不改变视窗</title>
</head>
<body>
  <button id='changeView'>删除一个分支</button>
  <div id="mountNode"></div>
<script src="../build/g6.js"></script>
<script src="../build/grid.js"></script>
<script>
  const grid = new Grid()
  const graph = new G6.TreeGraph({
    plugins: [grid],
    container: 'mountNode',
    width: 500,
    height: 500,
    defaultNode: {
      size: [20, 20],
      style: {
        fill: '#40a9ff',
  			stroke: '#096dd9'
      }
    },
  	defaultEdge: {
    	shape: 'cubic-horizontal',
    	style: {
      	stroke: '#A3B1BF'
    	}
    },
    modes: {
      default: [ 'drag-node', 'drag-canvas', {
        type: 'collapse-expand',
        onChange(item, collapsed) {
          const data = item.getModel()
          data.collapsed = collapsed
          return true
        }
      } ]
    },
    layout: {
      type: 'dendrogram',
      nodeSep: 50,
      rankSep: 100,
      direction: 'LR'
    }
  });

  let data = {
    // isRoot: true,
    id: 'Root',
  	style: {
      fill: 'red'
    },
    children: [
      {
        id: 'SubTreeNode1',
        raw: {},
        children: [
          {
            id: 'SubTreeNode1.1'
          }
        ]
      },
      {
        id: 'SubTreeNode2',
        children: [
          {
            id: 'SubTreeNode2.1'
          },
          {
            id: 'SubTreeNode2.2'
          }
        ]
      } 
    ]
  };

  graph.data(data)
  graph.render()

  graph.fitView()

  document.getElementById('changeView').addEventListener('click', (evt) => {
    const matrix = G6.Util.clone(graph.get('group').getMatrix())
    data.children.pop()
    graph.changeData(data)
    graph.get('group').setMatrix(matrix)
    graph.paint()
  })
  
</script>
</body>
</html>
